﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebSocketTest.aspx.cs"
    MasterPageFile="~/Site.master" Inherits="WS.EKA.Web.UI.Demo.WebSocketTest" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" type="text/css" href="/Styles/jquery.jqplot.min.css" />
    <script type="text/javascript" src="/Scripts/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.jqplot.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasTextRenderer.js"></script>
    <!--会影响x y轴label字体 -->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasAxisTickRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.pointLabels.js"></script>
    <!--ajax 请求-->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.json2.js"></script>
    <script type="text/javascript">

        var ws, ws2
        //core web socket function

        function connectSocketServer() {
            var messageBoard = $('#messageBoard');

            var support = "MozWebSocket" in window ? 'MozWebSocket' : ("WebSocket" in window ? 'WebSocket' : null);

            if (support == null) {
                console.error('current browser not support web socket');
                return;
            }

            // create a new websocket and connect
            // set dns/ip and path here(we'll use path to identity a websocket client)
            //notice the site port must not be the same with websocket port.
            //That means we can not set site port to 9999 any more.
            ws = new window[support]('ws://<%= Request.Url.Host %>:9999/sample');

            // when data is comming from the server, this metod is called
            ws.onmessage = function (evt) {
                //callback here
                $("#chart1").html("");
                $.jqplot('chart1', JSON.parse(evt.data), {
                    series: [{ 
                                showMarker: true,
                                pointLabels: { show: true, location: 'e', edgeTolerance: -15},
                                rendererOptions: {smooth: true,
                                                  animation: {
                                                        show: true,
                                                        speed:2500
                                                    }
                                                },
                                
                            }]
                });
            };

            // when the connection is established, this method is called
            ws.onopen = function () {
                console.log("A client is open");
            };

            // when the connection is closed, this method is called
            ws.onclose = function () {
                console.log('client closed!');
            }
        }

        function sendMessage(websocket, message) {
            if (websocket) {
                websocket.send(message);
            } else {
                console.error('websocket not create');
            }
        }

        // 测试发现websocket与服务器连接需要几秒。如果连接后立马发送消息会报错
        // 另外如果连接中断，客户端任然发送数据会报错
        $(document).ready(function () {
            connectSocketServer();
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="chart1">
    </div>
</asp:Content>
